<template>
  <div style="width: 100%;height: 100%">
    <div class="addren-main">
      <div class="list-itme">
        <span>发件人</span>
        <input
          style="width: 75%;float: right"
          type="text" v-model="name"
          placeholder="姓名"
          placeholder-class="item-placeholder"
          placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"
        />
      </div>
      <div class="list-itme"><span>固定电话</span><input
        type="text" v-model="mobile"
        placeholder="固定电话"
        placeholder-class="item-placeholder"
        placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"
      />
      </div>
      <div class="list-itme"><span>手机号</span><input
        type="text" v-model="phone"
        placeholder="手机号"
        placeholder-class="item-placeholder"
        placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"
      />
      </div>
      <div class="list-itme"><span>省/市/区</span>
        <picker
          mode="region"
          @change="bindAddrchange"
          :value="shenshiqu"
          style="width: 75%;float: right"
        >
          <div
            class="placeholder"
            style="float: left;width: 90%"
          >
            {{ addrText }}
          </div>
          <div
            class="add-ren-ft"
            style="right: 2px;top: 15px;position: relative;"
          >
          </div>
        </picker>
      </div>
      <div
        class="list-itme"
        style="height: 60px"
      ><span>详细地址</span>
        <textarea
          style="width: 75%;float: right;height: 60px;"
          placeholder="请输入街道、楼房号等"
          placeholder-class="placeholder" v-model="fullAddr"
          placeholder-style="font-size:12px;font-weight:100;color:rgba(163,170,183,1);"
        />
      </div>

    </div>
    <div class="addren-main">
      <div class="list-itme" style="height: 120px;margin-top: 20px;border-bottom:none;">
        <span style="height: 30px">智能粘贴</span>
        <textarea style="height: 70px;width:100%;border:1px solid rgba(236, 239, 246, 1);border-radius:4px;"
                  placeholder="粘贴地址，自动拆分姓名、电话和地址"
                  placeholder-class="item-placeholder" v-model="fullAddrTemp"
                  placeholder-style="font-size:12px;font-weight:100;color:rgba(163,170,183,1);"/>
      </div>
      <div class="caozuo"><a @click="jiexi">智能解析</a><a @click="uploadImg">清空</a></div>
      <div class="foot" >
        <div class="cancle" @click="doCancle">取消</div>
        <div class="queding" @click="add">确定</div>
      </div>
    </div>
    <mytoast ref="mytoast"/>
  </div>
</template>

<script>
    import api from '@/utils/api'
    import mytoast from "@/components/toast";

    export default {
        components: {mytoast},

        data() {
            return {
                orderNo: "",
                addr: {},
                name: "",
                phone: "",
                mobile: "",
                fullAddr: "",
                shenshiqu: [],
                fullAddrTemp: "",
                addrText: "省/市/区",
                sheng: '',
                shi: '',
                qu: ''
            };
        },

        onLoad: function (options) {
            this.orderNo = options.orderNo;
            if (options.addr) {
                this.addr = JSON.parse(decodeURIComponent(options.addr));
                this.loadRen();
            }
        },

        created() {

        },

        methods: {
            doCancle(){
                wx.navigateBack({
                    delta: 1
                })
            },
            loadRen() {
                this.name = this.addr.receiverName;
                this.phone = this.addr.phone;
                this.mobile = this.addr.mobile;
                this.fullAddr = this.addr.receiverAddress;
                this.fullAddrTemp = this.addr.fullAddr;
                this.shenshiqu = [this.addr.province, this.addr.city, this.addr.district];
                this.sheng = this.addr.province;
                this.shi = this.addr.city;
                this.qu = this.addr.district;
                this.addrText = this.addr.province + this.addr.city + this.addr.district;
            },
            bindAddrchange(e) {
                this.addrText = e.mp.detail.value.join("");
                this.sheng = e.mp.detail.value[0];
                this.shi = e.mp.detail.value[1];
                this.qu = e.mp.detail.value[2];
            },
            jiexi() {
                var _this = this;
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.splitReceiverInfo + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    method: "POST",
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    data: {
                        receiverInfo: _this.fullAddrTemp,
                    },
                    success(res) {
                        if (res.data.data) {
                            _this.fullAddr = res.data.data.address;
                            //_this.fullAddr = res.data.data.fullAddress;
                            _this.shenshiqu = [];
                            if (res.data.data.province) {
                                _this.sheng = res.data.data.province;
                                _this.shenshiqu.push(res.data.data.province);
                                if (res.data.data.city) {
                                    _this.shi = res.data.data.city;
                                    _this.shenshiqu.push(res.data.data.city);
                                    if (res.data.data.district) {
                                        _this.qu = res.data.data.district;
                                        _this.shenshiqu.push(res.data.data.district);
                                    }
                                }
                            }
                            _this.addrText = '';
                            if (res.data.data.province) {
                                _this.addrText = _this.addrText + res.data.data.province;
                            }
                            if (res.data.data.city) {
                                _this.addrText = _this.addrText + res.data.data.city;
                            }
                            if (res.data.data.district) {
                                _this.addrText = _this.addrText + res.data.data.district;
                            }
                        }
                    },
                    fail() {
                        _this.$refs.toast.show('网络异常')
                    },
                })
            },
            uploadImg(){
              this.fullAddrTemp = "";
            },
            add() {
                var _this = this;
                var orderForm = {
                    orderNo : _this.orderNo,
                    receiverAddress: this.fullAddr,
                    receiverName: this.name,
                    receiverProvince: this.sheng,
                    receiverCity: this.shi,
                    receiverCounty: this.qu,
                    receiverMobile: this.mobile,
                    receiverPhone: this.phone
                }
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.orderModify + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    data: orderForm,
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    method: "POST",
                    success(res) {
                        _this.$refs.mytoast.show('修改成功')
                        wx.navigateBack({
                            delta: 1
                        })
                    },
                    fail() {
                        _this.$refs.mytoast.show('网络异常')
                    },
                })
            }
        }
    };
</script>

<style lang="wxss">
  page {
    width: 100%;
    height: 100%;
    background-color: #f7fbff;
  }
</style>

<style scoped>
  .addren-main {
    padding: 0 0.3rem;
    background-color: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(7, 127, 255, 0.1);
    color: #373e4f;
    font-size: 0.26rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .list-itme {
    height: 40px;
    line-height: 40px;
    background-color: #ffffff;
    border-bottom: 0.5px solid #e8eaf0;
  }

  .list-itme span {
    font-size: 0.26rem;
  }

  .list-itme input {
    width: 75%;
    float: right;
    margin-top: 10px;
  }

  .placeholder {
    font-family: PingFang SC;
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #a3aab7;
  }

  .add-ren-ft {
    width: 5%;
    float: right;
    content: " ";
    display: inline-block;
    height: 8px;
    width: 8px;
    border-width: 2px 2px 0 0;
    border-color: #b2b2b2;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  }

  .caozuo {
    height: 0.65rem;
    line-height: 0.65rem;
  }

  .caozuo a {
    height: 0.65rem;
    line-height: 0.65rem;
    float: right;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(0, 119, 255, 1);
    margin-left: 12px;
  }

  .foot {
    border-top:1px solid rgba(236, 239, 246, 1);
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 40px;
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 40px;
    display:flex;
    justify-content: space-around;
  }

  .foot .cancle{
    width: 50%;
    background-color: #FFFFFF;
  }

  .foot .queding{
    width: 50%;
    background-color: #0077ff;
  }
</style>
